import { Scene } from 'phaser'
import { useGameStore } from '../stores/gameStore'

export class SettingsScene extends Scene {
  private gameStore = useGameStore()

  constructor() {
    super({ key: 'SettingsScene' })
  }

  preload() {
    // 加载设置界面资源
    this.load.image('settings-bg', '/assets/images/settings-bg.png')
    this.load.image('settings-button', '/assets/images/settings-button.png')
  }

  create() {
    // 创建设置背景
    this.add.image(400, 300, 'settings-bg')

    // 创建设置标题
    this.add
      .text(400, 100, '游戏设置', {
        fontSize: '36px',
        color: '#ffffff',
        fontFamily: 'Arial',
      })
      .setOrigin(0.5)

    // 音效开关
    this.createToggleButton(400, 200, '音效', this.gameStore.settings.soundEnabled, (enabled) => {
      this.gameStore.updateSettings({ soundEnabled: enabled })
    })

    // 音乐开关
    this.createToggleButton(400, 250, '音乐', this.gameStore.settings.musicEnabled, (enabled) => {
      this.gameStore.updateSettings({ musicEnabled: enabled })
    })

    // 难度选择
    this.createDifficultySelector(400, 300)

    // 语言选择
    this.createLanguageSelector(400, 350)

    // 返回按钮
    const backButton = this.add.image(400, 450, 'settings-button')
    backButton.setInteractive()

    this.add
      .text(400, 450, '返回主菜单', {
        fontSize: '20px',
        color: '#000000',
        fontFamily: 'Arial',
      })
      .setOrigin(0.5)

    backButton.on('pointerdown', () => {
      this.scene.start('MenuScene')
    })
  }

  private createToggleButton(
    x: number,
    y: number,
    label: string,
    initialState: boolean,
    onToggle: (enabled: boolean) => void,
  ) {
    const button = this.add.image(x + 100, y, 'settings-button')
    button.setInteractive()
    button.setScale(0.8)

    const text = this.add
      .text(x - 100, y, label, {
        fontSize: '20px',
        color: '#ffffff',
        fontFamily: 'Arial',
      })
      .setOrigin(0, 0.5)

    const toggleText = this.add
      .text(x + 100, y, initialState ? '开启' : '关闭', {
        fontSize: '18px',
        color: '#000000',
        fontFamily: 'Arial',
      })
      .setOrigin(0.5)

    button.on('pointerdown', () => {
      const newState = !initialState
      toggleText.setText(newState ? '开启' : '关闭')
      onToggle(newState)
    })
  }

  private createDifficultySelector(x: number, y: number) {
    this.add
      .text(x - 100, y, '难度', {
        fontSize: '20px',
        color: '#ffffff',
        fontFamily: 'Arial',
      })
      .setOrigin(0, 0.5)

    const difficulties = ['简单', '普通', '困难']
    const currentDifficulty = this.gameStore.settings.difficulty
    const currentIndex = ['easy', 'normal', 'hard'].indexOf(currentDifficulty)

    const difficultyText = this.add
      .text(x + 100, y, difficulties[currentIndex], {
        fontSize: '18px',
        color: '#000000',
        fontFamily: 'Arial',
        backgroundColor: '#ffffff',
        padding: { x: 10, y: 5 },
      })
      .setOrigin(0.5)

    difficultyText.setInteractive()
    difficultyText.on('pointerdown', () => {
      const nextIndex = (currentIndex + 1) % difficulties.length
      const nextDifficulty = ['easy', 'normal', 'hard'][nextIndex] as 'easy' | 'normal' | 'hard'
      difficultyText.setText(difficulties[nextIndex])
      this.gameStore.updateSettings({ difficulty: nextDifficulty })
    })
  }

  private createLanguageSelector(x: number, y: number) {
    this.add
      .text(x - 100, y, '语言', {
        fontSize: '20px',
        color: '#ffffff',
        fontFamily: 'Arial',
      })
      .setOrigin(0, 0.5)

    const languages = { zh: '中文', en: 'English' }
    const currentLanguage = this.gameStore.settings.language

    const languageText = this.add
      .text(x + 100, y, languages[currentLanguage], {
        fontSize: '18px',
        color: '#000000',
        fontFamily: 'Arial',
        backgroundColor: '#ffffff',
        padding: { x: 10, y: 5 },
      })
      .setOrigin(0.5)

    languageText.setInteractive()
    languageText.on('pointerdown', () => {
      const nextLanguage = currentLanguage === 'zh' ? 'en' : 'zh'
      languageText.setText(languages[nextLanguage])
      this.gameStore.updateSettings({ language: nextLanguage })
    })
  }
}
